
<!-- 公司整点上线率 -->
<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item :label="v.name" :prop="v.prop" :style="{ width: v.width }" v-for="v in searchItems">
                <el-input v-if="v.type == 'input'" v-model="queryParams[v.prop]" :placeholder="'请输入' + v.name" clearable
                    @keyup.enter="handleQuery" />
                <el-tree-select v-else-if="v.type == 'treeSelect'" v-model="queryParams[v.prop]"
                    :placeholder="'请输入' + v.name" clearable :data="sel_option[v.prop]" :expand-on-click-node="false"
                    :render-after-expand="false" @change="handleQuery" check-strictly :props="{ label: 'label' }"
                    node-key="id" filterable />
                <el-date-picker v-else-if="v.type == 'dateTime'" v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss"
                    type="datetimerange" :default-time="[new Date(2000, 1, 1, 0, 0, 0),
                    new Date(2000, 2, 1, 23, 59, 59),]" range-separator="-" start-placeholder="开始时间"
                    end-placeholder="结束时间"></el-date-picker>
                <el-date-picker v-else-if="v.type == 'date'" v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss"
                    :default-time="[new Date(2000, 1, 1, 0, 0, 0),
                    new Date(2000, 2, 1, 23, 59, 59),]" type="daterange" range-separator="-" start-placeholder="开始日期"
                    end-placeholder="结束日期"></el-date-picker>
                <el-select v-else-if="v.type == 'select'" v-model="queryParams[v.prop]" clearable filterable
                    :placeholder="'请输入' + v.name" @change="handleQuery">
                    <el-option v-for="item in sel_option[v.prop]" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="warning" plain icon="Download" @click="handleExport"
                    v-hasPermi="['statisticalReportForm:companyOnlineRate:export']">导出</el-button>
            </el-col>
            <el-col :span="1.5" v-hasPermi="['statisticalReportForm:companyOnlineRate:summaryExport']">
                <el-popover placement="bottom" :width="320" trigger="click" :visible="visible" :persistent='false'>
                    <template #reference>
                        <el-button type="warning" plain icon="Download" @click="visible = true">汇总导出</el-button>
                    </template>
                    <el-form-item label="汇总时间">
                        <el-date-picker v-model="dateRange2" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
                            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false"
                            :default-time="[new Date(2000, 1, 1, 0, 0, 0),
                            new Date(2000, 2, 1, 23, 59, 59),]"></el-date-picker>
                    </el-form-item>
                    <div style="text-align: right;">
                        <el-button @click="visible = false">取消</el-button>
                        <el-button type="primary" @click="handleSummaryExport">确定</el-button>
                    </div>
                </el-popover>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table highlight-current-row v-loading="loading" :data="tableList">
            <template v-for="v in tableItems">
                <el-table-column :label="v.name" align="left" :prop="v.prop" v-if="v.type == 'time'" width="180">
                    <template #default="scope">
                        <span>{{ parseTime(scope.row[v.prop], '{y}-{m}-{d}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="v.name" align="left" :prop="v.prop" v-else />
            </template>
            <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Document" @click="handleDetail(scope.row)"
                        v-hasPermi="['statisticalReportForm:companyOnlineRate:detail']">详情</el-button>
                    <el-button link type="primary" icon="Download" @click="handleDetailExport(scope.row)"
                        v-hasPermi="['statisticalReportForm:companyOnlineRate:singleExport']">导出</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

        <!-- 设备上线详情 -->
        <el-dialog title="详情" v-model="open" width="800px" append-to-body class="sky-form" @closed="resetDetailQuery">
            <div style="height: 600px;">
                <el-form :model="detailQuery" :inline="true" label-width="68px" @submit.native.prevent>
                    <el-form-item label="设备名称" prop="v.prop">
                        <el-input v-model="detailQuery.numberPlate" :placeholder="'请输入名称'" clearable
                            @keyup.enter.native="handleDetail(null)" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleDetail(null)">搜索</el-button>
                        <el-button type="warning" icon="Download" @click="handleDetailExport(null)"
                            v-hasPermi="['statisticalReportForm:companyOnlineRate:singleExport']">导出</el-button>
                    </el-form-item>
                </el-form>
                <virtualTable :columns="columns" :data="detailList" ref="v2Table" style="height: calc(100% - 50px);">
                    <template #rowItem="{ column, rowData, rowIndex }">
                        <span v-if="column.key === 'index'">{{ rowIndex + 1 }}</span>
                        <span v-else-if="column.key == 'onlineStatus'" class="onlineStatus"
                            :class="{ offlineStatus: (rowData[column.key] === 1) }">
                            {{ rowData[column.key] === 1 ? "离线" : "在线" }}</span>
                        <span v-else>{{ rowData[column.key] }}</span>
                    </template>
                </virtualTable>
            </div>
        </el-dialog>
    </div>
</template>
<script setup lang="ts" name="CompanyOnlineRate">
import virtualTable from '../../components/virtualTable/index.vue'
import dayjs from "dayjs"
import { reactive, toRefs, ref, getCurrentInstance, nextTick } from "vue"
import { treeDept } from "../../api/system/dept";
import request from '../../utils/request'
const loading = ref(false);
const visible = ref(false);
const open = ref(false);
const detailQuery: any = ref({
    numberPlate: '',
});
const tableList = ref([]);
const detailList = ref([]);
const { proxy } = getCurrentInstance();
//@ts-ignore
const parseTime = proxy.parseTime;
const v2Table = ref(null);
const tableItems = ref([
    { name: '所属公司', prop: "companyName" },
    { name: '入网设备数', prop: "networkCar" },
    { name: '上线设备数', prop: "onlineCar" },
    { name: '设备上线率', prop: "onlineRate" },
    { name: '统计日期', prop: "time", type: 'time' },
]);
const searchItems = ref([
    { name: '所属公司', prop: "companyId", type: 'treeSelect' },
    { name: '统计时间', prop: "time", type: "date", width: '' },
]);
const columns = ref([
    { key: "index", title: "序号", width: 64 },
    { key: "numberPlate", title: "设备名称", width: 160 },
    { key: "companyName", title: "所属公司", width: null },
    { key: "onlineStatus", title: "是否在线", width: 80 },
    { key: "time", title: "上线时间", width: 170 },
]);
const total = ref(0);
const showSearch = ref(true);
const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 15,
        companyId: "",
    },
});
const dateRange = ref([
    dayjs(new Date()).add(-1, "days").format("YYYY-MM-DD 00:00:00"),
    dayjs(new Date()).format("YYYY-MM-DD 23:59:59")
]);
const dateRange2 = ref([
    dayjs(new Date()).add(-1, "days").format("YYYY-MM-DD 00:00:00"),
    dayjs(new Date()).format("YYYY-MM-DD 23:59:59")
]);
const sel_option = ref({
    companyId: null,
});
treeDept().then(res => {
    sel_option.value.companyId = res.data
})
const { queryParams } = toRefs(data);

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetDetailQuery() {
    detailQuery.value = {
        numberPlate: '',
    };
}

/** 重置按钮操作 */
function resetQuery() {
    //@ts-ignore
    proxy.resetForm("queryRef");
    dateRange.value = [
        dayjs(new Date()).add(-1, "days").format("YYYY-MM-DD 00:00:00"),
        dayjs(new Date()).format("YYYY-MM-DD 23:59:59")
    ];
    handleQuery();
}

/** 查询列表 */
function getList() {
    loading.value = true;
    request({
        url: '/comlbs/reportStatistics/deviceOnline/companyHourlyOnlineRate',
        method: 'post',
        //@ts-ignore
        params: proxy.addDateRange2(queryParams.value, dateRange.value)
    }).then(({ data }: any) => {
        tableList.value = data.list;
        total.value = data.total;
        loading.value = false;
    }).catch(() => {
        loading.value = false;
    })
}

/** 详情按钮操作 */
function handleDetail(obj: any) {
    if (obj) {
        detailQuery.value = {
            companyId: obj.companyId,
            numberPlate: '',
            startTime: obj.time,
            endTime: dayjs(obj.time).add(1, "days").format("YYYY-MM-DD HH:mm:ss"),
        }
    }
    request({
        url: '/comlbs/reportStatistics/deviceOnline/companyHourlyOnlineDetail',
        method: 'post',
        //@ts-ignore
        params: detailQuery.value
    }).then(({ data }: any) => {
        open.value = true;
        detailList.value = data;
        nextTick(() => {
            v2Table.value?.vtScrollToTop();
        })
    })
}

/** 详情导出按钮操作 */
function handleDetailExport(obj: any) {
    if (obj) {
        detailQuery.value = {
            companyId: obj.companyId,
            numberPlate: '',
            startTime: obj.time,
            endTime: dayjs(obj.time).add(1, "days").format("YYYY-MM-DD HH:mm:ss"),
        }
    }
    //@ts-ignore
    proxy.download('comlbs/reportStatistics/deviceOnline/companyHourlyOnlineDetailExport',
        detailQuery.value
        , `公司整点上线率_${dayjs(new Date()).format("YYYY-MM-DD_HH:mm:ss")}.xlsx`)
}


/** 汇总导出按钮操作 */
function handleSummaryExport() {
    visible.value = false;
    //@ts-ignore
    proxy.download('comlbs/reportStatistics/deviceOnline/companyHourlyOnlineRateSummaryExport',
        //@ts-ignore
        proxy.addDateRange2(queryParams.value, dateRange2.value)
        , `公司整点上线率汇总_${dayjs(new Date()).format("YYYY-MM-DD_HH:mm:ss")}.xlsx`)
}


/** 导出按钮操作 */
function handleExport() {
    //@ts-ignore
    proxy.download('comlbs/reportStatistics/deviceOnline/companyHourlyOnlineRateExport',
        //@ts-ignore
        proxy.addDateRange2(queryParams.value, dateRange.value)
        , `公司整点上线率_${dayjs(new Date()).format("YYYY-MM-DD_HH:mm:ss")}.xlsx`)
}
getList();
</script>
<style lang='scss' scoped>
.onlineStatus {
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    padding: 2px 8px;
    color: #ffffff;
    background: #05b92f;
    border-radius: 3px;
}

.offlineStatus {
    background: #a8a8a8;
}
</style>